<template>
  <div id="userLayout">
    <div class="login_panel">
      <div class="login_panel_form">
        <div class="login_panel_form_title">
          <!-- <img
            class="login_panel_form_title_logo"
            :src="$GIN_VUE_ADMIN.appLogo"
            alt
          > -->
          <!-- <p class="login_panel_form_title_p">{{ $GIN_VUE_ADMIN.appName }}</p> -->
          <img
            class="login_panel_form_title_logo"
            src="@/assets/imgs/plm_logo.jpg"
            alt
          >
          <p class="login_panel_form_title_p1">产品生命周期管理</p>
          <p class="login_panel_form_title_p2">Product Lifecycle Management</p>
        </div>
        <el-form
          ref="loginForm"
          :model="loginFormData"
          :rules="rules"
          :validate-on-rule-change="false"
          @keyup.enter="submitForm"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginFormData.username"
              placeholder="请输入用户名"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginFormData.password"
              :type="lock === 'lock' ? 'password' : 'text'"
              placeholder="请输入密码"
            >
            </el-input>
          </el-form-item>
          <!-- <el-form-item prop="captcha">
            <div class="vPicBox">
              <el-input
                v-model="loginFormData.captcha"
                placeholder="请输入验证码"
                style="width: 60%"
              />
              <div class="vPic">
                <img
                  v-if="picPath"
                  :src="picPath"
                  alt="请输入验证码"
                  @click="loginVerify()"
                >
              </div>
            </div>
          </el-form-item> -->

          <!-- 安装了谷歌密钥后可以删除注释 -->
          <!-- <el-form-item>
            <el-input
              v-model="loginFormData.code"
              placeholder="请输入谷歌验证码"
            >
            </el-input>
          </el-form-item> -->
          <div style="margin-bottom:10px;color: #00a2e5;font-weight: 700;">注：请使用 HR 系统的账户和密码</div>
          <el-form-item>
            
            <el-button
              type="primary"
              size="large"
              style="width: 100%"
              @click="submitForm"
            >登 录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="login_panel_foot">
        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
}
</script>

<script setup>
// import screenfull from 'screenfull' // 引入screenfull
import { captcha } from '@/api/user'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/pinia/modules/user'
// 安装了谷歌密钥后可以删除注释
// import {postCode} from '@/plugin/googleKey/api/googleKey.js'
const router = useRouter()
// 验证函数
const checkUsername = (rule, value, callback) => {
  if (value.length < 1) {
    return callback(new Error('请输入正确的用户名'))
  } else {
    callback()
  }
}
const checkPassword = (rule, value, callback) => {
  if (value.length < 1) {
    return callback(new Error('请输入正确的密码'))
  } else {
    callback()
  }
}

// 获取验证码
const loginVerify = () => {
  captcha({}).then(async(ele) => {
    console.log(ele);
    rules.captcha.push({
      max: ele.data.captchaLength,
      min: ele.data.captchaLength,
      message: `请输入${ele.data.captchaLength}位验证码`,
      trigger: 'blur',
    })
    picPath.value = ele.data.picPath
    loginFormData.captchaId = ele.data.captchaId
  })
}
// loginVerify()

// 登录相关操作
const lock = ref('lock')
const changeLock = () => {
  lock.value = lock.value === 'lock' ? 'unlock' : 'lock'
}

const loginForm = ref(null)
const picPath = ref('')
const loginFormData = reactive({
  username: '',
  password: '',
  // captcha: '',
  // captchaId: '',
  // 安装了谷歌密钥后可以删除注释
  // code:'',
})
const rules = reactive({
  username: [{ validator: checkUsername, trigger: 'blur' }],
  password: [{ validator: checkPassword, trigger: 'blur' }],
  captcha: [
    {
      message: '验证码格式不正确',
      trigger: 'blur',
    },
  ],
})

const userStore = useUserStore()
const login = async() => {
  return await userStore.LoginIn(loginFormData)
}
const submitForm = () => {
  loginForm.value.validate(async(v) => {
    if (v) {
      // 安装了谷歌密钥后可以删除注释
      // if(await PostCode()){
        const flag = await login()
        // if (!flag) {
        //   loginVerify()
        // }
  //       if (screenfull.isEnabled) {
  //   screenfull.toggle()
  // }
      // }else{
      //   ElMessage({
      //   type: 'error',
      //   message: '请正确的填写谷歌验证码',
      //   showClose: true,
      // })
      // }
      
    } else {
      ElMessage({
        type: 'error',
        message: '请正确填写登录信息',
        showClose: true,
      })
      // loginVerify()
      return false
    }
  })
}

//安装了谷歌密钥后可以删除注释
//谷歌code验证
// const PostCode = async() => {
//       const res = await postCode({User:loginFormData.username,Code:loginFormData.code})
//       if (res.code === 0) {
//         return res.data
//       }
// }

</script>

<style lang="scss" scoped>
#userLayout {
    margin: 0;
    padding: 0;
    // 背景图片
    // background-image: url("@/assets/login_background2.jpg");
    // background-position: center center;
    // background-repeat: no-repeat;
    // background-attachment: fixed;
    // background-size: cover;
    background-color: #292d3e;
    width: 100%;
    height: 100%;
    position: relative;
    .input-icon {
        padding-right: 6px;
        padding-top: 4px;
    }
    .login_panel {
        position: absolute;
        top: 3vh;
        left: 2vw;
        width: 96vw;
        height: 94vh;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        .login_panel_form {
            width: 420px;
            // background-color: rgba(255, 255, 255, .8);
            background: #fff;
            padding: 40px 40px 40px 40px;
            margin: auto;
            border-radius: 10px;
            // box-shadow: 2px 3px 7px rgba(0, 0, 0, .2);
            .login_panel_form_title {
                text-align: center;
                margin: 30px 0;
                .login_panel_form_title_logo {
                    width: 90px;
                    height: 72px;
                }
                .login_panel_form_title_p {
                    font-size: 40px;
                    color: #409EFF;
                }
                .login_panel_form_title_p1 {
                    font-size: 40px;
                    color: #409EFF;
                    margin-bottom: 20px;
                    margin-top: 30px;
                }
                .login_panel_form_title_p2 {
                    font-size: 18px;
                    color: #409EFF;
                }
                
            }
            .vPicBox {
                display: flex;
                justify-content: space-between;
                width: 100%;
            }
            .vPic {
                width: 33%;
                height: 38px;
                background: #ccc;
                img {
                    width: 100%;
                    height: 100%;
                    vertical-align: middle;
                }
            }
        }
        .login_panel_foot {
            position: absolute;
            bottom: 20px;
            .links {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .link-icon {
                    width: 30px;
                    height: 30px;
                }
            }
            .copyright {
                color: #777777;
                margin-top: 5px;
            }
        }
    }
}

//小屏幕不显示右侧，将登录框居中
@media (max-width: 750px) {
    .login_panel_right {
        display: none;
    }
    .login_panel {
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
    }
    .login_panel_form {
        width: 100%;
    }
}

input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 1000px white inset;
   border: 1px solid #CCC!important;
  }
/*
  powerBy : bypanghu@163.com
*/
</style>
